import React, {PropsWithChildren, useEffect} from 'react'
import {Text, View} from "@tarojs/components";
import styles from "./scratchDocument.module.sass"
import Taro from "@tarojs/taro";
import {OffsetDateTime} from "@js-joda/core";
import {DATE_WITH_HOUR_MINUTE_FORMATER} from "../utils/Date";
import {Cell} from "@nutui/nutui-react-taro";
import FloatButton from "../components/FloatButton";
import {Add} from "@nutui/icons-react-taro";
import scratchDocumentStore from "../store/ScratchDocumentStore";
import {observer} from "mobx-react";
import MyNavigationBar from "../components/MyNavigationBar";

export interface ScratchDocumentProps extends PropsWithChildren {

}

const ScratchDocument: React.FC<ScratchDocumentProps> = ({}) => {
    useEffect(() => {
        scratchDocumentStore.getAll()
    }, []);

    return <>
        <MyNavigationBar>草稿单</MyNavigationBar>
        {scratchDocumentStore.sortedDocuments.map(item => {
            return <View onLongPress={async () => {
                await scratchDocumentStore.delete(item.createdDateTime)
            }}><Cell title={<Text
                className={styles.title}>{`创建于${OffsetDateTime.parse(item.createdDateTime)
                .format(DATE_WITH_HOUR_MINUTE_FORMATER)}`}</Text>} style={{margin: 0}}
                     description={`${item.items.length}个单品`}
                     onClick={() => {
                         Taro.navigateTo({
                             url: `/pages/scratchDocumentDetail?createdDateTime=${item.createdDateTime}`
                         })
                     }}/></View>
        })}
        <FloatButton icon={<Add/>} onClick={async () => {
            await scratchDocumentStore.create()
        }}/>
    </>
}


export default observer(ScratchDocument)


